import * as React from "../../../script/frame/apiModel/gui/React";
import {IProps, SyncId, UISyncData, View} from "../../../script/frame/apiModel/gui/React";
import {GuiKeys} from "../../../script/controller/model/ControllerOpt";
import Configer from "../../../script/frame/apiModel/config/Configer";
import {ModeConfig, UIConfig, UIConfigKey} from "../../../script/constant/UIConfig";
import {DifficultMode} from "../../../script/frame/dataSource/DataModel";
import {DataRouter} from "../../../script/frame/dataSource/DataRouter";
import {LightButton} from "parasimon/gui/code/component/LightButton";
import Tween from "parasimon/gui/tween/Tween";
import Easing from "parasimon/gui/tween/Easing";
import MathUtil from "../../../script/frame/codeAdapter/MathUtil";
import {PlayerFactory} from "../../../script/frame/PlayerFactory";
import {Logger} from "../../../script/frame/apiModel/config/Logger";
import {ChooseDiffBarInterface} from "../../interface/GuiInterface";
import {ResourceKey} from "../../../script/constant/ResourceConstant";


export interface IProp {

}
export interface IState {
    visible: boolean;

    currentDiff: number;

    diff: number;
    mode: DifficultMode;
    // infoVisible: boolean;

    boardAlpha: number;
    boardSpace: number;
    listAlpha: number;
}



export default class ChooseDiffBar extends ChooseDiffBarInterface<IProp, IState> {
    constructor(props: IProps & IProp) {
        super(props);
        this.state = {
            visible: false,
            diff: -1,
            mode: DifficultMode.pve,
            // infoVisible: false,

            currentDiff: -1,

            boardAlpha: 1,
            boardSpace: 0,
            listAlpha: 1,
            // chooseHeroFun: (player: player, unitPoolData: UnitPoolData) => {},
        }
    }

    render = () => {
        // if (this.state.diff && this.state.diff >= 0) {
        //     this.state.visible = false;
        // }
        const backSize = { w: 1, h: 1 };

        const diffBoard = Configer.getResource(ResourceKey.chooseDiffBoard)
        const backLeft = Configer.getResource(ResourceKey.chooseDiffLeft)
        const backRight = Configer.getResource(ResourceKey.chooseDiffRight)

        const modeBack = Configer.getResource(ResourceKey.chooseDiffModeBack)

        // const diffBack = Configer.getUIConfig(ResourceKey.chooseDiffDiffBack)

        const modeList: DifficultMode[] = [];

        const diffList = DataRouter.getDifficultDatas();

        for (let i = 0; i < diffList.length; i ++) {
            const difficultData = diffList[i];
            const mode = difficultData.mode;
            const index = modeList.indexOf(mode);
            const front = difficultData.front;
            if (front) {
                if (front > this.state.currentDiff) {
                    continue;
                }
            }
            if (index >= 0) {
            } else {
                modeList.push(mode)
            }
        }

        let hiddenEle = false;

        if (this.state.boardSpace > 0) {
            hiddenEle = true;
        }


        let isOne = false;
        if (PlayerFactory.getInstance().getLocalPlayer().playerId === 0) {
            isOne = true;
        }

        const modeFontSize = 0.019

        let listHeight = 0.8;

        let listAlpha = 1;
        listAlpha = listAlpha * this.state.listAlpha;

        // print(`${listAlpha}  ${this.state.listAlpha}`)

        return <View   key={GuiKeys.chooseDiffBarContent} style={{ hidden: !this.state.visible, backgroundImage: diffBoard, alpha: this.state.boardAlpha, width: backSize.w, height: backSize.h, left: 0, top: 0 }}>
            <View   key={GuiKeys.chooseDiffBarContentLeft} style={{ backgroundImage: backLeft, width: backSize.w / 2 - this.state.boardSpace, height: backSize.h }}>
                {
                    modeList.map(
                        (mode, index, array) => {
                            const modeConfig = this.getNameByDiffMode(mode);
                            const image = Configer.getResource(modeConfig.image);
                            const pos = modeConfig.pos;
                            const size = modeConfig.size;
                            if (isOne) {
                                return <View   key={`${GuiKeys.chooseDiffBarModeItem}|${mode}`} style={{ backgroundImage: image, width:  size.w, height: size.h, float: true, marginT: pos.y, marginL: pos.x }} >
                                    <LightButton   key={`${GuiKeys.chooseDiffBarModeItemText}|${mode}`} onMouseDown={() => { return this.chooseMode(mode); }} style={{ fontSize: modeFontSize, width:  size.w, height: size.h }}></LightButton>
                                </View>
                            } else {
                                return <View   key={`${GuiKeys.chooseDiffBarModeItem}|${mode}`} style={{ backgroundImage: image, width:  size.w, height: size.h, float: true, marginT: pos.y, marginL: pos.x }} >
                                    <View   key={`${GuiKeys.chooseDiffBarModeItemText}|${mode}`} style={{ fontSize: modeFontSize, width:  size.w, height: size.h }}></View>
                                </View>
                            }
                        }
                    )
                }
            </View>
            <View   key={GuiKeys.chooseDiffBarContentRight} style={{ backgroundImage: backRight, width: backSize.w / 2 - this.state.boardSpace, height: backSize.h, marginL: 2 * this.state.boardSpace }}>
                <View   key={GuiKeys.chooseDiffBarModeList} style={{ hidden: hiddenEle, alpha: listAlpha, width: backSize.w / 2 - this.state.boardSpace, height: backSize.h }}>
                    {
                        diffList.map(
                            (data, index, array) => {
                                const id = data.id;
                                const mode = data.mode;
                                let hidden = !(mode === this.state.mode);

                                if (hiddenEle) {
                                    hidden = hiddenEle
                                }

                                const front = data.front;
                                if (front) {
                                    if (front > this.state.currentDiff) {
                                        hidden = true;
                                    }
                                }

                                // const hidden = false;

                                let back = 'xx';
                                const pos = { x: 0, y: 0 };
                                const size = { h: 0.0625, w: 0.16 };
                                if (data.UI_path) {
                                    const resourceId = data.UI_path;
                                    const resourceData = DataRouter.getResourceDataByResourceId(resourceId);
                                    if (resourceData?.src) {
                                        back = resourceData.src;
                                    }
                                    pos.x = data.UI_x;
                                    pos.y = data.UI_y;
                                    size.h = data.UI_h;
                                    size.w = data.UI_w;
                                }
                                const tempIndex = index;

                                if (isOne) {
                                    return <View   key={`${GuiKeys.chooseDiffBarDiffItem}|${tempIndex}`} style={{ hidden: hidden, backgroundImage: back,  float: true, width:  size.w, height: size.h, marginL: pos.x, marginT: pos.y  }}>
                                        <LightButton   key={`${GuiKeys.chooseDiffBarDiffItemText}|${tempIndex}`} onMouseDown={() => { return this.chooseDiff(index); }} style={{ width:  size.w, height: size.h }}></LightButton>
                                    </View>
                                } else {
                                    return <View   key={`${GuiKeys.chooseDiffBarDiffItem}|${tempIndex}`} style={{ hidden: hidden, backgroundImage: back,  float: true, width:  size.w, height: size.h, marginL: pos.x, marginT: pos.y  }}>
                                        <View   key={`${GuiKeys.chooseDiffBarDiffItemText}|${tempIndex}`} style={{ width:  size.w, height: size.h }}></View>
                                    </View>
                                }
                            }
                        )
                    }
                </View>
            </View>
        </View>
    }

    openBar = (currentDiff: number) => {
        this.setState({
            ...this.state,
            visible: true,
            currentDiff,
        })
    }

    closeBar = () => {
        this.setState({
            ...this.state,
            visible: false,
        })
    }

    reflush = (mode: DifficultMode, difficult: number) => {
        if (difficult && difficult >= 0) {
            const tween = new Tween({ boardAlpha: 1 }) // 创建一个新的tween，修改“coords”。
                .to({ boardAlpha: 0 }, 1000) //在500毫秒内移动到（300,200）。
                .easing(Easing.Quadratic.Out) // 使用缓和功能使动画平滑。
                .onUpdate((temp) => {
                    const boardAlpha = temp.boardAlpha;
                    this.setState({
                        ... this.state,
                        boardAlpha: boardAlpha
                    }, true)
                })
                .onComplete(
                    (temp) => {
                        this.setState({
                            ... this.state,
                            visible: false,
                        }, true)
                    }
                );
            tween.start();
        } else {
            const tween1 = new Tween({ listAlpha: -1 }) // 创建一个新的tween，修改“coords”。
                .to({ listAlpha: 1 }, 800) //在500毫秒内移动到（300,200）。
                .easing(Easing.Quadratic.Out) // 使用缓和功能使动画平滑。
                .onUpdate((temp) => {
                    const time = temp.listAlpha
                    const listAlpha = MathUtil.abs(time);
                    // print(`${diffTop}`);
                    const state: IState = {
                        ... this.state,
                        listAlpha: listAlpha
                    }
                    if (time > 0) {
                        state.mode = mode
                    }
                    this.setState(state, true)
                })
            tween1.start()
        }
    }

    chooseMode = (mode: number) => {
        const syncData: UISyncData = { id: SyncId.chooseDiff, param: { mode: mode } };
        return syncData;
    }

    chooseDiff = (diff: number) => {
        const syncData: UISyncData = { id: SyncId.chooseDiff, param: { difficult: diff } };
        // this.closeBar();
        return syncData;
    }

    getVisible = () => {
        return this.state.visible;
    }

    getNameByDiffMode = (mode: DifficultMode) => {
        const index = mode - 1;
        const modeConfigs: ModeConfig[] = Configer.getUIConfig(UIConfigKey.modeConfigs);
        if (modeConfigs[index]) {
            return  modeConfigs[index];
        }
        Logger.toastError(`模式${mode} 未配置UI图片`)
    }
}